@import "./color-palette";

// Colors
$color-primary: lighten($light-green-darken-3, 3%);
$color-secondary: $amber-darken-3;
$color-red: $deep-orange-accent-3;

$color-active: lighten($color-primary, 35%);
$color-hover: rgba($black, 0.08);
$color-focus: rgba($black, 0.15);

$border-color-light: $grey-lighten-3;
$border-color-lighten: $grey-lighten-4;
$border-color: $grey-lighten-2;
$border-color-dark: $grey-lighten-1;

// Font
$font-family: 'Roboto', sans-serif;
$font-weight: 400;
$line-height: 1.4;
$font-size-small: 1.2rem;
$font-size-medium: 1.4rem;
$font-size-large: 1.6rem;
$font-size: $font-size-medium;

// Z-index
$modal-z-index: 2000;
$popper-z-index: 3000;
$mask-z-index: 8000;
$notification-z-index: 9000;

// Grid
$grid-columns: 12;
$spacing: .8rem;

$spacing-scale-0: 0;
$spacing-scale-1: $spacing * 0.25; // .2rem
$spacing-scale-2: $spacing * 0.5; // .4rem
$spacing-scale-3: $spacing * 0.75; // .6rem
$spacing-scale-4: $spacing; // .8rem
$spacing-scale-5: $spacing * 1.25; // 1rem
$spacing-scale-6: $spacing * 1.5; // 1.2rem
$spacing-scale-7: $spacing * 1.75; // 1.4rem
$spacing-scale-8: $spacing * 2; // 1.6rem
$spacing-scale-9: $spacing * 3; // 2.4rem
$spacing-scale-10: $spacing * 4.5; // 3.6rem
$spacing-scale-11: $spacing * 6; // 4.8rem

$spacing-scale: (
	"0": $spacing-scale-0,
	"1": $spacing-scale-1,
	"2": $spacing-scale-2,
	"3": $spacing-scale-3,
	"4": $spacing-scale-4,
	"5": $spacing-scale-5,
	"6": $spacing-scale-6,
	"7": $spacing-scale-7,
	"8": $spacing-scale-8,
	"9": $spacing-scale-9,
	"10": $spacing-scale-10,
	"11": $spacing-scale-11
);

/*
Breakpoints
Source: https://getbootstrap.com/docs/4.4/layout/grid/
*/
$breakpoint-xs: 0;
$breakpoint-sm: px-to-em(576px);
$breakpoint-md: px-to-em(768px);
$breakpoint-lg: px-to-em(992px);
$breakpoint-xl: px-to-em(1200px);
$breakpoint-xxl: px-to-em(1400px);

$breakpoints: (
	"xs": $breakpoint-xs,
	"sm": $breakpoint-sm,
	"md": $breakpoint-md,
	"lg": $breakpoint-lg,
	"xl": $breakpoint-xl,
	"xxl": $breakpoint-xxl
);

// Layout
$container-max-width: 120rem;
$container-spacing-x: $spacing-scale-9;
$container-padding: 0 $container-spacing-x;

// Skeleton
$skeleton-bg-color: $blue-grey-lighten-5;

// Heading
$heading-1-font-size: $font-size * 2.5;
$heading-2-font-size: $font-size * 2;
$heading-3-font-size: $font-size * 1.75;
$heading-4-font-size: $font-size * 1.5;
$heading-5-font-size: $font-size * 1.25;
$heading-6-font-size: $font-size;
$heading-font-weight: 400;
$heading-color: $grey-darken-3;
$heading-line-height: inherit;
$heading-gutter-bottom: $spacing-scale-6;

// Body
$body-bg-color: $grey-lighten-5;
$body-color: $grey-darken-4;

// Border radius
$border-radius-sm: .3rem;
$border-radius-lg: .5rem;
$border-radius: $border-radius-lg;

// Box shadow
$box-shadow-sm: 0 2px 1px -1px rgba($black, 0.12), 0 1px 1px 0 rgba($black, 0.05), 0 1px 3px 0 rgba($black, 0.122);
$box-shadow-md: 0 2px 1px -1px rgba($black, 0.12), 0 1px 1px 0 rgba($black, 0.1), 0 2px 4px 0 rgba($black, .2);
$box-shadow-lg: 0 4px 16px -1px rgba(0, 0, 0, 0.25);
$box-shadow: $box-shadow-md;

// Icon
$icon-small-size: 16px;
$icon-medium-size: 20px;
$icon-large-size: 24px;
$icon-xlarge-size: 36px;
$icon-size: $icon-large-size;

$icon-color: $grey-darken-2;
$icon-hover-color: $color-primary;

// Button
$btn-color: $grey-darken-3;
$btn-bg-color: $grey-lighten-3;
$btn-hover-bg-color: $white;
$btn-small-font-size: $font-size-small;
$btn-medium-font-size: $font-size-medium;
$btn-large-font-size: $font-size-large;
$btn-font-size: $btn-medium-font-size;
$btn-font-weight: 500;
$btn-text-transform: none;
$btn-text-letter-spacing: .4px;
$btn-box-shadow: $box-shadow-sm;
$btn-focus-box-shadow: 0 0px 0px 1px rgba($color-primary, .4), 0 0px 0px 4px $color-active;
$btn-padding-x: $spacing-scale-6;
$btn-padding-y: 0;
$btn-border-width: 2px;
$btn-border-radius: $border-radius-lg;
$btn-min-height: 3.6rem;
$btn-min-width: 8.4rem;
$btn-disabled-opacity: .4;

$btn-primary-bg-color: $color-primary;
$btn-primary-color: $white;
$btn-primary-focus-box-shadow: 0 0px 0px 1px rgba($white, .1), 0 0px 0px 4px $color-active;

// Icon button
$icon-btn-hover-bg-color: $white;
$icon-btn-hover-color: null;
$icon-btn-small-margin-x: $spacing-scale-3;
$icon-btn-medium-margin-x: $spacing-scale-4;
$icon-btn-large-margin-x: $spacing-scale-5;
$icon-btn-margin-x: $icon-btn-medium-margin-x;
$icon-btn-disabled-opacity: .6;

// Tooltip
$tooltip-bg-color: $grey-darken-1;
$tooltip-color: $white;
$tooltip-font-size: $font-size-small;
$tooltip-font-weight: 400;
$tooltip-letter-spacing: .4px;
$tooltip-padding: .8rem 1.2rem;
$tooltip-max-width: 40rem;
$tooltip-border-radius: $border-radius-lg;

// Link
$link-color: $grey-darken-2;
$link-hover-color: $color-secondary;
$link-small-font-size: $font-size-small;
$link-medium-font-size: $font-size-medium;
$link-large-font-size: $font-size-large;
$link-font-weight: 400;
$link-text-decoration: underline;

// Input
$input-bg-color: $white;
$input-disabled-bg-color: $grey-lighten-4;
$input-disabled-opacity: .6;
$input-border-width: 1px;
$input-border-color: $border-color;
$input-border-radius: $border-radius-sm;
$input-padding-y: $spacing-scale-4;
$input-padding-x: $spacing-scale-5;
$input-focus-stripe-width: 2px;
$input-focus-stripe-color: rgba($color-primary, .85);
$input-placeholder-color: $grey;
$input-adornment-color: $grey;
$input-default-width: 22rem;

// Checkbox
$checkbox-margin-x: $spacing-scale-3;
$checkbox-hover-padding: $spacing-scale-4;

// Field
$field-label-color: $grey-darken-3;
$field-label-font-size: $font-size-small;
$field-label-line-height: 1.6;
$field-label-font-weight: 500;
$field-label-letter-spacing: .3px;
$field-label-width: 12rem;
$field-helper-text-color: $grey;
$field-helper-text-font-size: $font-size-small;
$field-helper-text-font-weight: 400;
$field-helper-text-letter-spacing: .3px;

// Menu
$menu-bg-color: $white;
$menu-border-radius: $border-radius;
$menu-box-shadow: $box-shadow;
$menu-min-width: 2rem;

// Window
$window-bg-color: $white;
$window-box-shadow: $box-shadow-lg;
$window-border-radius: $border-radius-lg;
$window-margin: $spacing-scale-9;
$window-body-painted-bg-color: $body-bg-color;

// List
$list-padding-x: 0;
$list-padding-y: $spacing-scale-4;
$list-item-padding-y: $spacing-scale-4;
$list-item-padding-x: $spacing-scale-7;
$list-item-text-padding-y: .25rem;
$list-item-text-padding-x: 0;
$list-item-disabled-opacity: .6;
$list-item-empty-color: $grey-darken-1;
$list-item-empty-font-style: italic;
$list-subheader-font-size: $font-size-small;
$list-subheader-font-weight: 500;
$list-subheader-letter-spacing: .3px;
$list-subheader-color: $grey-darken-3;
$list-subheader-padding-y: $spacing-scale-2;

// Alerts
$alert-error-color: $red;
$alert-warning-color: $orange-darken-1;
$alert-info-color: $blue;
$alert-success-color: $green;
$alert-padding-x: $spacing-scale-7;
$alert-padding-y: $spacing-scale-4;
$alert-border-radius: $border-radius-lg;

// Notification
$notification-max-width: 60rem;
$notification-padding: $container-spacing-x;
$notification-item-margin-bottom: $spacing-scale-6;
$notification-item-box-shadow: $box-shadow-lg;

// Mask
$mask-bg-color: rgba(#fff, .5);
$mask-title-color: $grey-darken-2;
$mask-title-padding: $spacing-scale-6;
$mask-title-letter-spacing: .4px;
$mask-title-font-weight: 700;
